<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>东盟分类游戏</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
    <style>
        *{padding:0;margin:0;border:0;}
        /*轮播图*/
        .swiper-container {
            width: 100vw;
            height: 100vh;
        }
        .swiper-container .swiper-slide img{width:100%;}  
        /*开始场景*/
        #start-stage{position:relative;min-height:100vh;background-color:#2d5c30;}
        #start-stage .bg{width:100vw;}
        #start-stage .btn{position: absolute;display:block;z-index: 2;width: 48vw;height: 11vw;left: 25.5vw;}
        #start-stage .btn1{top:77vw;}
        #start-stage .btn2{top:98vw;}
        /*游戏场景*/
        #game-stage{display:none;position:relative;width:100vw;height:100vh;overflow:hidden;background-color:#c2ecff;}
        #game-stage .bg{width:100vw;}
        #game-stage .bottomtree{position: absolute;z-index:2;bottom:0;left:0;right:0;width:100vw;}
        #game-stage #dragElem{position: absolute;z-index: 4;top: 11vw;left: 16vw;width: 20vw;}
        #game-stage #timeElemWrap{width: 34vw;right: -4vw;top: 13vw;position: absolute;z-index:3;}
        #game-stage img{width:100%;}
        #game-stage #timeElem{position: absolute;z-index: 2;top:0px;right:13vw;font-size:18px;line-height:10vw;color:#fff;}
        #game-stage .playelem{z-index:3;width:45vw;height:20vw;margin-bottom:3vw;}
        #game-stage #playwrap{position: absolute;z-index:3;top:50vw;width:100vw;display: flex;justify-content: space-around;flex-wrap: wrap;}
        /*说明场景*/
        #rule-stage{display:none;}
        #rule-stage .bg{width:100vw;}
        #rule-stage .btn{position: absolute;display:block;z-index: 2;width: 48vw;height: 11vw;top:100vw;left: 25.5vw;}
        #rule-stage .close{display:block;position:absolute;z-index:2;top:0;left:0;width:20vw;height:20vw;color:#fff;font-size:20px;}
        /*展示场景*/
        #info-stage{display:none;}
        #info-stage .bg{width:100vw;}
        #info-stage .close{display:block;position:absolute;z-index:2;top:0;left:0;width:20vw;height:20vw;}
    </style>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
</head>
<body>
    <script>
        for(let i=1;i<11;i++){
            $('body').append(`
                <img src="./imgs/s${i}.png" style="display:none;"/>
                <img src="./imgs/s${i}_1.png" style="display:none;"/>
                <img src="./imgs/s${i}_2.png" style="display:none;"/>
            `)
        }
    </script>
    <div id="start-stage">
        <img class="bg" src="./imgs/start.png" alt="开始游戏">
        <a class="btn btn1" href="#game"></a>
        <a class="btn btn2" href="#rule"></a>
    </div>
    <div id="info-stage">
        <a class="close" href="#/"></a>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./imgs/1.png"/></div>
                <div class="swiper-slide"><img src="./imgs/2.png"/></div>
                <div class="swiper-slide"><img src="./imgs/3.png"/></div>
                <div class="swiper-slide"><img src="./imgs/4.png"/></div>
                <div class="swiper-slide"><img src="./imgs/5.png"/></div>
                <div class="swiper-slide"><img src="./imgs/6.png"/></div>
                <div class="swiper-slide"><img src="./imgs/7.png"/></div>
                <div class="swiper-slide"><img src="./imgs/8.png"/></div>
                <div class="swiper-slide"><img src="./imgs/9.png"/></div>
                <div class="swiper-slide"><img src="./imgs/10.png"/></div>
            </div>
        </div>
    </div>
    <div id="rule-stage">
        <a class="close" href="#/">返回</a>
        <img class="bg" src="./imgs/rule.png" alt="">
        <a class="btn" href="#info"></a>
    </div>
    <div id="game-stage">
        <img id="dragElem" src="./imgs/s1.png" draggable="true"/>
        <div id="timeElemWrap">
            <img src="./imgs/time.png" alt="">
            <div id="timeElem"></div>
        </div>
        <img class="bg" src="./imgs/play.jpg" alt="">
        <img class="bottomtree" src="./imgs/tree.png" alt="">
    </div>
    

    <script>
        location.hash = ''
        //元素获取
        let startStage = $('#start-stage')
        let infoStage = $('#info-stage')
        let ruleStage = $('#rule-stage')
        let gameStage = $('#game-stage')
        let timeElem = $('#game-stage #timeElem')

        //游戏建筑
        gameStage.append('<div id="playwrap"></div>')
        let playwrap = gameStage.find('#playwrap')
        for(let i=1;i<11;i++){
            playwrap.append(`<img class="playelem"
                src="./imgs/s${i}_1.png" 
                src2="./imgs/s${i}_2.png" 
                d_src="./imgs/s${i}.png"/>`)
        }
        
        //场景显示
        function showStage(index){
            switch(index){
                case 1:
                    startStage.show()
                    infoStage.hide()
                    ruleStage.hide()
                    gameStage.hide()
                break
                case 2:
                    startStage.hide()
                    infoStage.show()
                    ruleStage.hide()
                    gameStage.hide()
                break
                case 3:
                    startStage.hide()
                    infoStage.hide()
                    ruleStage.show()
                    gameStage.hide()
                break
                case 4:
                    startStage.hide()
                    infoStage.hide()
                    ruleStage.hide()
                    gameStage.show()
                break
            }
        }

        //随机变化拖动图片
        function resetElem(){
            
            if(!resetElem.elems){
                let elems = []
                for(let i=1;i<11;i++){
                    elems.push(`./imgs/s${i}.png`)
                }
                resetElem.elems = elems
            }else{
                if(resetElem.elems.length==0){
                    alert('你已经点亮所有地标')
                    return
                }
            }
            let index = Math.floor((Math.random()*resetElem.elems.length))
            $('#game-stage #dragElem').attr('src',resetElem.elems.splice(index,1))
        }
        resetElem()

        //页面变化
        window.onhashchange = function() {
            let page = location.hash;
            if (page === "#start") {
                showStage(1)
                return
            } else if (page === "#info") {
                showStage(2)
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal', // 垂直切换选项
                    loop: false, // 循环模式选项
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                })  
                return
            } else if (page === "#rule") {
                showStage(3)
                return
            } else if (page === "#game") {
                showStage(4)
                let timmer = setInterval(function fn(){
                    fn.currTime = fn.currTime || 62
                    fn.currTime --
                    timeElem.text(fn.currTime - 1 + 's')
                    if(fn.currTime==1){
                        clearInterval(timmer)
                        if(resetElem.elems && resetElem.elems.length>0){
                            alert('时间耗尽！')
                            showStage(1)
                        }
                    }
                },1000)
                return
            } else{
                showStage(1)
                return
            }
        }
        
        $('#game-stage #dragElem').on('dragstart',function(event){
            event.dataTransfer.setData("elem",$(event.target).attr('src'))
        })

        $('#game-stage .playelem').on('drop',function(event){
            let that = $(this)
            if(event.dataTransfer.getData("elem")==that.attr('d_src')){
                that.attr('src',that.attr('src2'))
                resetElem()
            }
        })

        $('#game-stage .playelem').on('dragover',function(event){
            event.preventDefault()
        })
    </script>

    <script>        
              
    </script>
</body>
</html>